<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 10px">
      <el-form :inline="true" :model="formParams">
        <el-form-item label="用户名称">
          <el-input v-model="formParams.userName" placeholder="用户名称" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formParams.account" placeholder="账号" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getSysUserAndRoleInfo" :icon="Search" :loading="loading">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <TableComponent
      :tableData="tableData"
      :total="total"
      :formParams="formParams"
      :column="tableColumn"
      @getAddorEdit="getAddorEdit"
      @getRefresh="getSysUserAndRoleInfo"
      @setPaging="setPaging"
      tableTitle="用户列表"
      v-loading="loading">
      <template v-slot:text="{ scope, item }">
        <span>{{ scope.row[item.field] }}</span>
      </template>
      <template v-slot:roles="{ scope, item }">
        <el-tag v-for="i in scope.row[item.field]" class="roles-tag">{{ i.roleName }}</el-tag>
      </template>
      <template v-slot:state="{ scope, item }">
        <span>{{ scope.row[item.field] == 1 ? '启用' : '禁用' }}</span>
      </template>
      <template v-slot:isMultiLogin="{ scope, item }">
        <span>{{ scope.row[item.field] == 1 ? '是' : '否' }}</span>
      </template>
      <template v-slot:operation="{ scope, item }">
        <el-button type="primary" size="small" @click="getAddorEdit(scope.row)">编辑</el-button>
        <el-popconfirm title="Are you sure to delete this?" @confirm="getDelete(scope.row.account)">
          <template #reference>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </TableComponent>
    <el-dialog v-model="dialogTableVisible" title="操作" width="600">
      <el-form :model="formFields.sysUserDo" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名称">
          <el-input v-model="formFields.sysUserDo.userName" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formFields.sysUserDo.account" />
        </el-form-item>
        <el-form-item label="密码" v-if="!formFields.sysUserDo.id">
          <el-input v-model="formFields.sysUserDo.password" />
        </el-form-item>
        <el-form-item label="角色权限">
          <el-select v-model="sysUserRoles" multiple placeholder="选着角色">
            <el-option v-for="item in options" :key="item.roleCode" :label="item.roleName" :value="item.roleCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
          <el-radio-group v-model="formFields.sysUserDo.state">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否多点登录">
          <el-radio-group v-model="formFields.sysUserDo.isMultiLogin">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="getAddSysUser">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { Search } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { reactive, ref } from 'vue'
  import type { GetSysUserAndRoleInfoPageDto, SaveOrUpdateSysUserUserRoleDto, SysUserDo } from './type/index'
  import { getSysUserAndRoleInfoPage, saveOrUpdateSysUserUserRole, removeSysUserAndSysUserRoleByAccount } from '@/api/sysUser'
  import { findSysRoleList } from '@/api/sysRole'
  import type { SysRoleDo } from '@/views/manage/roles/type'
  import TableComponent from '@/components/TableComponent/TableComponent.vue'
  const dialogTableVisible = ref(false)
  let formParams = ref<GetSysUserAndRoleInfoPageDto>({
    pageNo: 1,
    pageSize: 10,
    account: '',
    userName: '',
  })
  let formFields = reactive<SaveOrUpdateSysUserUserRoleDto>({
    sysUserDo: {
      account: '',
      isMultiLogin: 1,
      password: '',
      state: 1,
      userName: '',
    },
    sysUserRoleDos: [],
  })
  const sysUserRoles = ref<string[]>([])
  const total = ref<number>(0)
  const loading = ref<boolean>(false)
  const options = ref<SysRoleDo[]>([])
  const tableData = ref<SysUserDo[]>([])
  const tableColumn = [
    { label: '用户名称', field: 'userName', slotName: 'text' },
    { label: '账号', field: 'account', slotName: 'text' },
    { label: '角色权限', field: 'roles', slotName: 'roles' },
    { label: '用户状态', field: 'state', slotName: 'state' },
    { label: '是否多点登录', field: 'isMultiLogin', slotName: 'isMultiLogin' },
    { label: '操作', field: 'operation', slotName: 'operation' },
  ]
  findSysRoleList({}).then((res) => {
    options.value = res.data
  })
  const getAddSysUser = () => {
    let params = {
      sysUserDo: formFields.sysUserDo,
      sysUserRoleDos: [] as any,
    }
    sysUserRoles.value.forEach((item) => {
      params.sysUserRoleDos.push({ account: formFields.sysUserDo.account, roleCode: item })
    })
    saveOrUpdateSysUserUserRole(params).then((res) => {
      dialogTableVisible.value = false
      getSysUserAndRoleInfo()
      ElMessage({
        type: res.data ? 'success' : 'error',
        message: res.data ? '创建成功' : '创建失败',
      })
    })
  }
  function getAddorEdit(item: any) {
    sysUserRoles.value = []
    if (item.id) {
      formFields.sysUserDo = { ...item }
      item.roles.forEach((i: any) => {
        sysUserRoles.value.push(i.roleCode)
        formFields.sysUserRoleDos.push({ account: item.account, roleCode: i.roleCode })
      })
    } else {
      formFields = reactive({
        sysUserDo: {
          account: '',
          isMultiLogin: 1,
          password: '',
          state: 1,
          userName: '',
        },
        sysUserRoleDos: [],
      })
    }
    dialogTableVisible.value = true
  }
  function getSysUserAndRoleInfo() {
    loading.value = true
    getSysUserAndRoleInfoPage(formParams.value).then((res) => {
      loading.value = false
      tableData.value = res.data.records
      total.value = res.data.total
    })
  }
  function getDelete(account: string) {
    removeSysUserAndSysUserRoleByAccount({ account }).then((res) => {
      getSysUserAndRoleInfo()
      ElMessage({
        type: res.data ? 'success' : 'error',
        message: res.data ? '删除成功' : '删除失败',
      })
    })
  }
  function setPaging(params: GetSysUserAndRoleInfoPageDto) {
    formParams.value = { ...formParams.value, ...params }
    getSysUserAndRoleInfo()
  }
  getSysUserAndRoleInfo()
</script>

<style lang="scss" scoped>
  .roles-tag {
    margin-right: 10px;
  }
</style>
